<script setup lang="ts">
import { onMounted, ref, reactive, computed } from 'vue'
import {
  getProducts,
  addProduct,
  deleteProductById,
  getProductById,
  editProduct,
  editProductSku,
  deleteProductByIdList,
} from '@/apis/product'
import LineHeader from '@/components/LineHeader.vue'
import {
  ElMessage,
  type FormInstance,
  type FormRules,
  ElMessageBox,
  type Action,
} from 'element-plus'
import { genFileId } from 'element-plus'
import type { UploadRawFile, UploadInstance } from 'element-plus'

/**
 * 商品数量
 */
const defaultSelect = ref(1)
const allProductsCount = ref(0)
const availableProductsCount = ref(0)
const notAvailableProductsCount = ref(0)
const awaitingReviewProductsCount = ref(0)
const failedReviewProductsCount = ref(0)
/**
 * 检索的商品类型
 */
const selectProductsType = async (value: number) => {
  defaultSelect.value = value
  if (value === 1) {
    productStatus.value = ''
  } else if (value === 2) {
    productStatus.value = '已上架'
  } else if (value === 3) {
    productStatus.value = '未上架'
  } else if (value === 4) {
    productStatus.value = '待审核'
  } else if (value === 5) {
    productStatus.value = '未通过'
  }
  await initProducts()
}
const productStatus = ref('')

/**
 * 商品列表
 */
const productList: any = ref()
type Product = {
  ProductID: 0
}
import type { ComponentSize } from 'element-plus'
const currentPage = ref(1)
const pageSize = ref(10)
const totalSize = ref(0)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)
const selectable = (row: Product) => ![-100].includes(row.ProductID)

const handleSizeChange = async (val: number) => {
  console.log(`${val} items per page`)
  await initProducts()
}
const handleCurrentChange = async (val: number) => {
  console.log(`current page: ${val}`)
  await initProducts()
}

const input = ref('')

/**
 * 添加商品
 */
// 添加商品弹窗
const addProductFormVisible = ref(false)
// 添加商品表单
const addProductForm: any = ref({
  Name: '',
  Description: '',
  Price: '',
  Currency: '',
  Country: '',
  Cover: '/upload/img/default.jpg',
  Remarks: '',
  Specification: [],
})
// 添加表单对象
const addProductFormRef = ref()
// 打开添加商品弹窗
const openAddProductForm = () => {
  addProductFormVisible.value = true
}
// 添加表单校验规则
const addProductFormRules = reactive<FormRules>({
  Name: [
    {
      required: true,
      message: '请输入商品名称',
      trigger: 'blur',
    },
  ],
  Description: [
    {
      required: true,
      message: '请输入商品描述',
      trigger: 'blur',
    },
  ],
  Price: [
    {
      required: true,
      message: '请输入商品价格',
      trigger: 'blur',
    },
  ],
  Currency: [
    {
      required: true,
      message: '请选择货币类型',
      trigger: 'trigger',
    },
  ],
  Country: [
    {
      required: true,
      message: '请选择国家',
      trigger: 'trigger',
    },
  ],
  Cover: [
    {
      required: true,
      message: '请上传商品封面',
      trigger: 'blur',
    },
  ],
  Remarks: [
    {
      required: true,
      message: '请输入商品备注',
      trigger: 'blur',
    },
  ],
})
// 图片上传
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps } from 'element-plus'
import { baseURL } from '@/utils/request'
import router from '@/router'

const uploadUrl = baseURL + '/products/upload'
const imageUrl = ref(baseURL + '/upload/img/default.jpg')

const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
  editImageUrl.value = URL.createObjectURL(uploadFile.raw!)
  addProductForm.value.Cover = response.filepath
  editProductForm.value.Cover = response.filepath
  console.log(response)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}
// 货币类型
const currencyOptions = [
  {
    value: 'CNY',
    label: '人民币/CNY/￥',
  },
  {
    value: 'USD',
    label: '美元/USD/$',
  },
  {
    value: 'JPY',
    label: '日元/JPY/￥',
  },
]
// 国家
const countryOptions = [
  {
    value: '中国',
    label: '中国',
  },
  {
    value: '美国',
    label: '美国',
  },
  {
    value: '日本',
    label: '日本',
  },
]
// 添加 SKU
const addSKU = () => {
  addProductForm.value.Specification.push({
    SpecName: '',
    Remarks: '',
    Subspecification: [],
  })
}
// 删除 SKU
const removeSKU = (item: any) => {
  const index = addProductForm.value.Specification.indexOf(item)
  if (index !== -1) {
    addProductForm.value.Specification.splice(index, 1)
  }
}
// 添加 subSKU
const addSubSKU = (item: any) => {
  item.Subspecification.push({ SubSpecName: '', Remarks: '' })
}
// 删除 subSKU
const removeSubSKU = (item: any, subItem: any) => {
  const index = item.Subspecification.indexOf(subItem)
  if (index !== -1) {
    item.Subspecification.splice(index, 1)
  }
}
// 添加商品表单提交
const submitAddProductsForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      console.log('添加商品')
      const res = await addProduct(addProductForm.value)
      if (res.status === 200) {
        ElMessage({
          message: '添加成功',
          type: 'success',
        })
        addProductFormVisible.value = false
      } else {
        ElMessage({
          message: '添加失败',
          type: 'error',
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

/**
 * 批量添加商品
 */
// 批量添加商品弹窗
const addProductListFormVisible = ref(false)
// 添加商品表单
const addProductListForm: any = ref({
  File: '',
})
// 添加表单对象
const addProductListFormRef = ref()
// 打开添加商品弹窗
const openAddProductListForm = () => {
  addProductListFormVisible.value = true
}
// 文件 Ref
const csvUploadRef = ref<UploadInstance>()
const csvUploadUrl = baseURL + '/products/upload/csv'
// 获取示例文件
const getProductCsvFlie = () => {
  window.open(baseURL + '/products/csv/example')
}
// 文件限制
const handleExceed: UploadProps['onExceed'] = (files) => {
  csvUploadRef.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  csvUploadRef.value!.handleStart(file)
}
// 添加商品表单提交
const submitAddProductsListForm = async (formEl: FormInstance | undefined) => {
  csvUploadRef.value!.submit()
}

/**
 * 编辑商品
 */
// 打开编辑商品弹窗
const handleEdit = async (index: number, row: any) => {
  const res = await getProductById(row.ProductID)
  editProductForm.value = res.data
  editProductFormVisible.value = true
  editProductForm.value.ID = row.ProductID
  editImageUrl.value = baseURL + '/' + editProductForm.value.Cover
  console.log(editProductForm.value)
}

// 编辑商品弹窗
const editProductFormVisible = ref(false)
// 编辑商品表单
const editProductForm: any = ref({
  ID: '',
  Name: '',
  Description: '',
  Price: '',
  Currency: '',
  Country: '',
  Cover: '',
  Remarks: '',
  Status: '',
  Specification: [],
})
// 编辑表单对象
const editProductFormRef = ref()
// 编辑图像
const editImageUrl = ref('')
// 编辑表单校验规则
const editProductFormRules = reactive<FormRules>({
  Name: [
    {
      required: true,
      message: '请输入商品名称',
      trigger: 'blur',
    },
  ],
  Description: [
    {
      required: true,
      message: '请输入商品描述',
      trigger: 'blur',
    },
  ],
  Price: [
    {
      required: true,
      message: '请输入商品价格',
      trigger: 'blur',
    },
  ],
  Currency: [
    {
      required: true,
      message: '请选择货币类型',
      trigger: 'trigger',
    },
  ],
  Country: [
    {
      required: true,
      message: '请选择国家',
      trigger: 'trigger',
    },
  ],
  Cover: [
    {
      required: true,
      message: '请上传商品封面',
      trigger: 'blur',
    },
  ],
  Remarks: [
    {
      required: true,
      message: '请输入商品备注',
      trigger: 'blur',
    },
  ],
  Status: [
    {
      required: true,
      message: '请选择商品状态',
      trigger: 'blur',
    },
  ],
})

// 编辑商品表单提交
const submitEditProductsForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      console.log('编辑商品')
      const res = await editProduct(editProductForm.value.ID, editProductForm.value)
      if (res.status === 200) {
        ElMessage({
          message: '编辑成功',
          type: 'success',
        })
        editProductFormVisible.value = false
        console.log(res)
      } else {
        ElMessage({
          message: '编辑失败',
          type: 'error',
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

// 商品状态
const statusOptions = [
  {
    label: '上架',
    value: '已上架',
  },
  {
    label: '下架',
    value: '未上架',
  },
  {
    label: '待审核',
    value: '待审核',
  },
  {
    label: '未通过',
    value: '未通过',
  },
]

// 编辑 SKU 库存
const editSKUDialogVisible = ref(false)
const openEditSKUDialog = () => {
  editSKUDialogVisible.value = true
}
const submitEditSKUForm = async (SKU: string, price: number, stock: number) => {
  const res = await editProductSku(SKU, {
    Price: price,
    Stock: stock,
  })
  if (res.status === 200) {
    ElMessage({
      message: '编辑成功',
      type: 'success',
    })
    editSKUDialogVisible.value = false
  } else {
    ElMessage({
      message: '编辑失败',
      type: 'error',
    })
  }
}
const getLength = (SKUList: any, index: number, index2: number) => {
  return index * SKUList.length + index2
}
/**
 * 删除商品
 * @param index
 * @param row
 */
// 删除商品
const handleDelete = (index: number, row: any) => {
  console.log(index, row)
  ElMessageBox.alert('确认删除' + row.Name + '商品？', '删除商品', {
    confirmButtonText: '确认',
    callback: async (action: Action) => {
      if (action === 'confirm') {
        ElMessage({
          type: 'success',
          message: `删除${row.Name}物品成功`,
        })
        await deleteProductById(row.ProductID)

        // 删除 productsList 中的数据
        productList.value.splice(index, 1)
      } else {
        ElMessage({
          type: 'error',
          message: `删除${row.Name}物品失败`,
        })
      }
    },
  })
}
/**
 * 批量删除
 */
/**
 * 获取要删除的列表
 */
const deleteButtonDisable = computed(() => {
  if (deleteProductList.value.length === 0) {
    return true
  } else {
    return false
  }
})
const deleteProductList: any = ref([])
const deleteProductIdList: any = ref()
const handleSelectionChange = (val: any) => {
  deleteProductList.value = val
  deleteProductIdList.value = val.map((item: any) => item.ProductID)
  console.log(deleteProductIdList.value)
}
const handleBatchDelete = () => {
  ElMessageBox.alert('确认删除已选商品？', '删除商品', {
    confirmButtonText: '确认',
    callback: async (action: Action) => {
      if (action === 'confirm') {
        console.log('list', deleteProductIdList.value)
        ElMessage({
          type: 'success',
          message: `删除物品成功`,
        })
        await deleteProductByIdList(deleteProductIdList.value)

        window.location.reload()
      } else {
        ElMessage({
          type: 'error',
          message: `删除物品失败`,
        })
      }
    },
  })
}

// 获取 csv 文件
const getCSV = async () => {
  window.open(baseURL + '/products/csv')
}

// 获取数据
const initProducts = async () => {
  const products = await getProducts({
    page: currentPage.value,
    size: pageSize.value,
    status: productStatus.value,
    name: input.value,
  })

  productList.value = products.data
  totalSize.value = products.totalSize.all

  allProductsCount.value = products.totalSize.all
  availableProductsCount.value = products.totalSize.listed
  notAvailableProductsCount.value = products.totalSize.not_listed
  awaitingReviewProductsCount.value = products.totalSize.audit
  failedReviewProductsCount.value = products.totalSize.not_approved
}

// 初始化
onMounted(async () => {
  await initProducts()
  console.log(productList.value)
})
</script>
<template>
  <div id="products">
    <el-container style="height: 100%">
      <el-main>
        <LineHeader #text>商品列表</LineHeader>

        <!-- 头部 -->
        <el-row class="options-row">
          <el-col :span="8">
            <div class="options">
              <el-button
                :class="{ 'el-button--primary': defaultSelect === 1 }"
                @click="selectProductsType(1)"
                >全部商品({{ allProductsCount }})</el-button
              >
              <el-button
                :class="{ 'el-button--primary': defaultSelect === 2 }"
                @click="selectProductsType(2)"
                >已上架({{ availableProductsCount }})</el-button
              >
              <el-button
                :class="{ 'el-button--primary': defaultSelect === 3 }"
                @click="selectProductsType(3)"
                >未上架({{ notAvailableProductsCount }})</el-button
              >
              <el-button
                :class="{ 'el-button--primary': defaultSelect === 4 }"
                @click="selectProductsType(4)"
                >待审核({{ awaitingReviewProductsCount }})</el-button
              >
              <el-button
                :class="{ 'el-button--primary': defaultSelect === 5 }"
                @click="selectProductsType(5)"
                >未通过({{ failedReviewProductsCount }})</el-button
              >
            </div></el-col
          >
          <el-col :span="8">
            <div class="search">
              <p>商品搜索：</p>
              <el-input v-model="input" style="width: 240px" placeholder="商品名称" />
              <el-button class="search-button" type="primary" @click="initProducts">搜索</el-button>
            </div></el-col
          >
          <el-col :span="8">
            <div class="add">
              <el-button class="add-button" type="primary" @click="getCSV">导出商品信息</el-button>
              <el-button class="add-button" type="primary" @click="openAddProductForm"
                >添加商品</el-button
              >
              <el-button class="add-button" type="primary" @click="openAddProductListForm"
                >批量添加商品</el-button
              >
              <el-button
                class="add-button"
                type="danger"
                @click="handleBatchDelete"
                :disabled="deleteButtonDisable"
                >批量删除</el-button
              >
            </div>
          </el-col>
        </el-row>

        <!-- 商品数据 -->
        <el-table
          ref="multipleTableRef"
          :data="productList"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" :selectable="selectable" width="55" />

          <el-table-column label="商品ID" width="120">
            <template #default="scope">{{ scope.row.ProductID }}</template>
          </el-table-column>
          <el-table-column property="Cover" label="商品图片">
            <template #default="scope">
              <img
                :src="scope.row.Cover"
                alt="goods"
                style="width: 100px; height: 100px"
                fit="cover"
              />
            </template>
          </el-table-column>
          <el-table-column property="Name" label="商品名称" />
          <el-table-column property="Price" label="商品价格" />
          <el-table-column property="Description" label="商品描述" />
          <el-table-column property="Currency" label="货币" />
          <el-table-column property="Country" label="国家/地区" />
          <el-table-column property="Status" label="状态" />
          <el-table-column property="StockQuantity" label="库存" />
          <el-table-column property="Remarks" label="备注" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">
                编辑
              </el-button>
              <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="page">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 30, 50]"
            :size="size"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next"
            :total="totalSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
    </el-container>

    <!-- 添加商品 -->
    <el-dialog v-model="addProductFormVisible" title="添加商品" width="800">
      <el-form :model="addProductForm" ref="addProductFormRef" :rules="addProductFormRules">
        <el-form-item label="商品图片">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品名称" prop="Name">
          <el-input v-model="addProductForm.Name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="商品描述" prop="Description">
          <el-input v-model="addProductForm.Description" autocomplete="off" />
        </el-form-item>
        <el-form-item label="商品价格" prop="Price">
          <el-input v-model="addProductForm.Price" autocomplete="off" />
        </el-form-item>
        <el-form-item label="货币类型" prop="Currency">
          <el-select v-model="addProductForm.Currency" placeholder="请选择货币类型">
            <el-option
              v-for="item in currencyOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="国家/地区" prop="Country">
          <el-select v-model="addProductForm.Country" placeholder="请选择国家/地区">
            <el-option
              v-for="item in countryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-for="(info, index) in addProductForm.Specification"
          :key="info"
          :label="'SKU' + (index + 1)"
        >
          <el-form-item label="规格名称" style="margin-right: 16px">
            <el-input v-model="info.SpecName" />
          </el-form-item>
          <el-form-item label="规格描述" style="margin-right: 16px">
            <el-input v-model="info.Remarks" />
          </el-form-item>

          <el-form-item
            v-for="(subInfo, index) in info.Subspecification"
            :key="subInfo"
            style="margin-top: 16px"
          >
            <el-form-item label="子规格名称" style="margin-right: 16px">
              <el-input v-model="subInfo.SubSpecName"></el-input>
            </el-form-item>
            <el-form-item label="子规格描述" style="margin-right: 16px">
              <el-input v-model="subInfo.Remarks"></el-input>
            </el-form-item>
            <el-button type="danger" @click.prevent="removeSubSKU(info, subInfo)"
              >删除子规格</el-button
            >
          </el-form-item>

          <el-form-item style="margin-top: 16px; margin-right: 16px">
            <el-button @click="addSubSKU(info)">添加子规格</el-button>
          </el-form-item>
          <el-button type="danger" @click.prevent="removeSKU(info)" style="margin-top: 16px"
            >删除SKU</el-button
          >
        </el-form-item>
        <el-form-item label="SKU库存">
          <el-button @click="addSKU">添加SKU</el-button>
        </el-form-item>
        <el-form-item label="商品备注" prop="Remarks">
          <el-input v-model="addProductForm.Remarks" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addProductFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAddProductsForm(addProductFormRef)">
            添加
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 批量添加商品 -->
    <el-dialog v-model="addProductListFormVisible" title="批量添加商品" width="800">
      <el-form :model="addProductListForm" ref="addProductListFormRef" :rules="addProductFormRules">
        <el-form-item label="商品csv表格">
          <el-upload
            ref="csvUploadRef"
            :action="csvUploadUrl"
            :limit="1"
            :on-success="
              () => {
                ElMessage.success('上传成功')
              }
            "
            :on-error="
              () => {
                ElMessage.error('上传失败')
              }
            "
            :on-exceed="handleExceed"
            :auto-upload="false"
          >
            <template #trigger>
              <el-button type="primary">选择文件</el-button>
              <el-button type="success" @click="getProductCsvFlie()">下载示例文件</el-button>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addProductListFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAddProductsListForm(addProductListFormRef)">
            添加
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 编辑商品 -->
    <el-dialog v-model="editProductFormVisible" title="编辑商品" width="800">
      <el-form :model="editProductForm" ref="editProductFormRef" :rules="editProductFormRules">
        <el-form-item label="商品图片">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="editImageUrl" :src="editImageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品名称" prop="Name">
          <el-input v-model="editProductForm.Name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="商品描述" prop="Description">
          <el-input v-model="editProductForm.Description" autocomplete="off" />
        </el-form-item>
        <el-form-item label="商品价格" prop="Price">
          <el-input v-model="editProductForm.Price" autocomplete="off" />
        </el-form-item>
        <el-form-item label="货币类型" prop="Currency">
          <el-select v-model="editProductForm.Currency" placeholder="请选择货币类型">
            <el-option
              v-for="item in currencyOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="国家/地区" prop="Country">
          <el-select v-model="editProductForm.Country" placeholder="请选择国家/地区">
            <el-option
              v-for="item in countryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商品状态" prop="Status">
          <el-select v-model="editProductForm.Status" placeholder="请选择商品状态">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商品备注" prop="Remarks">
          <el-input v-model="editProductForm.Remarks" autocomplete="off" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="openEditSKUDialog">编辑SKU库存</el-button>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editProductFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitEditProductsForm(editProductFormRef)">
            编辑
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 编辑 SKU 库存 -->
    <el-dialog v-model="editSKUDialogVisible" title="编辑商品SKU库存" width="600">
      <el-form>
        <el-form-item v-for="(item, index) in editProductForm.SKUList">
          <h1 style="width: 100%">库存{{ index + 1 }} - SKU： {{ item.SKU }}</h1>
          <el-form-item label="商品价格">
            <el-input v-model="item.Price"></el-input>
          </el-form-item>
          <el-form-item label="商品库存">
            <el-input v-model="item.Stock"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              @click="
                submitEditSKUForm(
                  editProductForm.SKUList[index].SKU,
                  editProductForm.SKUList[index].Price,
                  editProductForm.SKUList[index].Stock,
                )
              "
              >提交SKU编辑</el-button
            >
          </el-form-item>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editSKUDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped lang="scss">
#products {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 16px 32px;
  box-sizing: border-box;

  .options-row {
    margin-bottom: 16px;
  }

  .options,
  .search,
  .add {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .search {
    .search-button {
      padding: 0 32px;
      margin-left: 16px;
    }
  }

  .add {
    .add-button {
      padding: 0 48px;
    }
  }

  .page {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 32px;
  }
}
</style>
